<template>
    <div class="content">
        <el-card class="box-card" v-for="item in residentList" :key="item.id" :body-style="{ padding: '20px 5px' }"
            @click="toDetail(item.id)">
            <el-avatar :size="70"> {{item.residentName}} </el-avatar>
            <p><span style="font-size: 18px; font-weight: 500;">{{item.residentName}}</span> <span style="font-weight: 400;
    font-size: 12px;
    color: #CCCCCC;">{{item.Age}}岁 <el-icon>
                        <Male />
                    </el-icon></span>
            </p>
            <el-tag color="rgba(40, 208, 148, 1)" effect="dark" round>{{item.signStatus}}</el-tag>
            <div style="margin-top: 16px; display: flex; justify-content: space-around;">
                <el-tag :color="tags.color" :type=tags.type effect="light" round v-for="(tags,index) in item.tage"
                    :key="index">{{tags.value}}</el-tag>
                <!-- <el-tag color="rgba(108, 118, 244, 0.0980392156862745)" effect="light" round>冠心病</el-tag>
                <el-tag color="rgba(253, 219, 120, 0.0980392156862745)" type="warning" effect="light" round>高血糖</el-tag> -->
            </div>
        </el-card>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, reactive, ref, computed } from 'vue';
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
let store = useStore()
let router = useRouter()
store.dispatch('getResidentInfo')
let residentList = computed(() => {
    return store.state.residentList
})

const toDetail = (val: number) => {
    router.push({
        path: '/home/residentDetail',
        query: {
            id: val
        }
    })
}

</script>

<style scoped lang='less'>
.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 30px;
}

.box-card {
    width: 200px;
    height: 230px;
    margin: 20px 20px;
    text-align: center;
}

.box-card:hover {
    box-shadow: none;
    background-color: rgba(242, 247, 251, 1);
    cursor: pointer;
}
</style>